<template>
  <div class="my_echart_01">
    <v-chart :option="mychart_01" id="mychart_01" style="box-sizing: border-box;"></v-chart>
  </div>
</template>

<script>
export default {
  name: 'my_echarts_01',
  data() {
    return {
      mychart_01: null
    }
  },
  mounted() {
    // 设置 echarts 数据
    let xData = ["肉食","主食","饮品","零食","蔬菜"]
    let yData = [75,100,50,40,80];
    let yData2 = [60,85,65,55,70];
    // 设置配置项
    this.mychart_01 = {
      title: {
        text: "卡路里每日补充（单位：千卡）",
        textStyle: {
          fontSize: 18
        }
      },
      color: ["#91c7ae", "#aaa"], // 改变 legend 颜色
      legend: {
        left: 'right',
        itemGap: 12, // 图例间隔
        itemHeight: 12,
        textStyle: {
          fontSize: 12
        }
      },
      tooltip: { // 鼠标悬浮提示字体大小
        show: true,
        textStyle: {
          fontSize: 14
        },
      },
      xAxis: {
        type: "value",
        axisLabel: {
          fontSize: 12
        }
      },
      yAxis: {
        data: xData,
        type: "category", // 坐标轴的类型: value数据轴 category类目轴
        axisLabel: {
          fontSize: 12
        }
      },
      series: [
        {
          name: "今日情况",
          type: "bar",
          data: yData,
          label: {
            show: true,
            color: "#fff",
            fontSize: 12
          },
          // 单独设置每个轴的颜色
          itemStyle: {
            normal: {
              color: function(parmas) {
                let colorList = [
                  "#c23531",
                  "#2f4554",
                  "#61a0a8",
                  "#ff8088",
                  "#91c7ae"
                ];
                return colorList[parmas.dataIndex]
              }
            }
          },
        },
        {
          name: "昨日情况",
          type: "bar",
          data: yData2,
          // 单独设置每个轴的颜色
          itemStyle: {
            normal: {
              color: function(parmas) {
                let colorList = [
                  "#ddd",
                  "#ddd",
                  "#ddd",
                  "#ddd",
                  "#ddd"
                ];
                return colorList[parmas.dataIndex]
              }
            }
          },
        },
      ]
    }
  }
}
</script>

<style scoped>
  .my_echart_01 {
    width: 580px;
    height: 480px;
    position: absolute;
    top: 60px;
    left: 20px;
    background-color: #eee;
    border-top: 16px solid #4f4942;
    border-left: 16px solid #706961;
    border-right: 16px solid #706961;
    border-bottom: 16px solid #9c9286;
    z-index: 1;
  }

  #mychart_01 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
  }
</style>
